<template>
  <div class="container">
    <div class="external">
      <div class="head">
        <div v-show="userInfo.username" class="left-head flex-grow-0 flex-row flex-y-center">
          <div class="flex-grow-0">
            <img style="width: 0.68rem;border-radius: 50%;margin-right: 0.1rem" :src="userInfo.head_portrait" alt="">
          </div>
          <div class="flex-grow-1 flex-y-center">
            <p class="oneLine">{{userInfo.username}}</p>
          </div>
        </div>
        <span class="yiziqianjing">一字千金</span>
        <div @click="userCenterClick" class="login flex-grow-0 flex-y-center flex-x-center">
          个人中心
        </div>
        <div class="userSettingbg" @click="showUserSetting=!showUserSetting" v-if="showUserSetting">
          <div class="userSettingbox">
            <div @click.stop="userSettingListClick(1)" class="userSettingList flex-y-center flex-x-center">绑定手机号</div>
            <div @click.stop="userSettingListClick(2)" class="userSettingList flex-y-center flex-x-center">常见问题</div>
            <div @click.stop="userSettingListClick(3)" class="userSettingList flex-y-center flex-x-center">联系客服</div>
            <div @click.stop="userSettingListClick(4)" class="userSettingList flex-y-center flex-x-center">退出账号</div>
          </div>
        </div>
      </div>
      <div class="account">
        <div class="account_balance">
          <span>账户余额 ( 元 )</span>
        </div>
        <div class="Money">
          <span>￥{{userInfo.balance}}</span>
        </div>
        <div class="Top-up_withdrawal">
          <div @click="rechargeClick" class="top_up_recharge flex-grow-0 flex-y-center flex-x-center">
            <img style="width:0.63rem;margin-right: 0.45rem" v-src="'/static/image/chongzhi_icon@3x.png'" alt="">
            充值
          </div>
          <div @click="tixianclick" class="top_up_recharge top_up_recharge2 flex-grow-0 flex-y-center flex-x-center">
            <img style="width: 0.64rem;margin-right: 0.45rem" v-src="'/static/image/tixian_icon@3x.png'" alt="">
            提现
          </div>
        </div>
      </div>
    </div>

    <div class="font-library">
      <div class="Character-reference">
        <p class="left-money">
          <span class="preciprice">字库参考价值 ( 元 )</span><br>
          <span class="number">{{userInfo.reference_price}}</span>
        </p>
        <p class="sell" @click="toTradeLine">
          <a href="javascript:void (0)" class="work-off">出售</a>
        </p>
      </div>
    </div>

    <!--充值-->
    <div
      v-if="showRecharge==true || showTiXian==true || showBindPhone == true || showWordDetails==true || showSell==true || showMask==true"
      class="mask">
    </div>
    <div v-if="showRecharge" class="white_content">
      <div class="rechargeTitle">充值金额</div>
      <div class="option-money flex-list">
        <div @click="chooseMoney(index)" :class="{'active':index==rechargeIndex}"
             class="moneyItem flex-grow-0 flex-x-center flex-y-center" v-for="(item,index) in moneyItem">
          ￥{{item}}
        </div>
      </div>
      <p class="pay_fang_shi">支付方式</p>
      <div class="payment flex-row">
        <div class="flex-grow-0">
          <img style="width: 0.63rem;margin-right: 0.17rem" v-src="'/static/image/weixin(1)@3x.png'" alt="">
          微信支付
        </div>
        <div class="flex-grow-1 flex-right">
          <check-icon :value.sync="check_pay"></check-icon>
        </div>
      </div>
      <div class="confirm-payment flex-grow-0 flex-y-center flex-x-center">
        充值
      </div>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>
    <!-- 提现 -->
    <div v-if="showTiXian" class="white_content">
      <p class="tixiandesc">提现金额(余额:{{userInfo.balance}})</p>
      <div class="tixianinputbox flex-row flex-y-bottom">
        <div class="red flex-grow-0">￥</div>
        <div class="flex-grow-1"><input type="text" placeholder="每次提现扣除5%手续费" v-model="jin_e"></div>
        <div class="flex-grow-1 flex-right allTixian" @click="take_fetch">全部提现</div>
      </div>
      <p class="desc">注：最小提现金额 ¥10.00</p>
      <div class="confirm-payment flex-grow-0 flex-y-center flex-x-center">提现</div>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--绑定手机号-->

    <div v-if="showBindPhone" class="white_content">
      <div class="phone_box">
        <p class="phone_title">手机绑定</p>
        <div class="input_list flex-row">
          <input v-model="phoneData.phoneNumber" type="number">
        </div>
        <p class="phone_title">验证码</p>
        <div class="input_list flex-row">
          <div class="flex-grow-0"><input v-model="phoneData.code" type="number"></div>
          <div class="flex-grow-1 flex-right getCode">获取验证码</div>
        </div>
        <div @click="bindPhoneBtn" class="confirm-payment bingbtn flex-grow-0 flex-y-center flex-x-center">绑定</div>
      </div>

      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--字体详情弹框提示-->
    <div v-if="showWordDetails" class="white_content2 flex-row flex-y-center">
      <div style="margin-bottom: 0;margin-right: 0.22rem"
           class="font-box flex-grow-0 flex-y-center flex-x-center"
           :class="[{zise:wordDetails.color==4},{blue:wordDetails.color==3},{green:wordDetails.color==2},{white:wordDetails.color==1}]"
      >
        {{wordDetails.word}}
      </div>
      <div class="text-description flex-grow-1">
        <p>当前最低价:￥{{wordDetails.money}}</p>
        <p>今日标准价:￥{{wordDetails.standard_price}}</p>
        <p>上架数量:{{wordDetails.number}}</p>
        <p>最近购入:{{wordDetails.is_buy}}</p>
      </div>
      <div @click="saleBtn" class="sale_box flex-grow-0 flex-y-center flex-x-center">
        出售
      </div>
      <div @click="cancleClick" class="canceldetails flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--出售弹框-->
    <div v-if="showSell" class="white_content3 white_content4">
      <!-- 弹框内容 -->
      <div class="quantity">
        <div class="possess flex-row">
          <div class="font-box flex-grow-0 flex-y-center flex-x-center"
               :class="[{zise:wordDetails.color==4},{blue:wordDetails.color==3},{green:wordDetails.color==2},{white:wordDetails.color==1}]">
            {{wordDetails.word}}
          </div>
          <div class="text-desc flex-y-bottom">拥有:{{user_number?user_number:0}}</div>
        </div>
      </div>

      <div class="subtract flex-row">
        <div @click="sale_click_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox flex-grow-0 flex-y-center">
          <div @click="sale_click_jian" class="left-jian commen flex-grow-0 flex-x-center flex-y-center">
            -
          </div>
          <div class="number-one">
            {{saleCount}}
          </div>
          <div @click="sale_click_jia" class="right-jia commen flex-grow-0 flex-x-center flex-y-center">
            +
          </div>
        </div>
        <div @click="sale_click_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="subtract2 flex-row">
        <div @click="salePrice_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox2 flex-grow-0 flex-y-center">
          <div @click="salePrice_jian" class="left-jian2 commen2 flex-grow-0 flex-x-center flex-y-center">
            -5%
          </div>
          <div class="number-one2">
            {{salePrice | getCount}}
          </div>
          <div @click="salePrice_jia" class="right-jia2 commen2 flex-grow-0 flex-x-center flex-y-center">
            +5%
          </div>
        </div>
        <div @click="salePrice_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="timeTitle">上架时间</div>

      <div class="chooseTimBeox flex-row">
        <div class="time flex-x-center flex-y-center" @click="timeChoose(index)"
             :class="{'active':index == currentTimeIndex}" v-for="(item,index) in timeList">{{item}}小时
        </div>
      </div>

      <div class="average flex-grow-0 flex-y-center flex-x-center" @click="user_sale">出售</div>
      <p class="selldesc">注：出售价格只能为当日标准价格+/-25%
        出售成功后，平台会收取5%手续费</p>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

    <!--任务弹框-->
    <div v-if="showMask" class="white_content">
      <div class="daily-mission">每日任务</div>
      <div class="WeChat-login flex-row flex-y-center">
        <div class="icon-imges">
          <img v-src="'/static/image/denglu.png'" alt="">
        </div>
        <div class="Login_applet">
          登录小程序
        </div>
        <div>1 / 1</div>
        <div class="off_the_stocks ok flex-grow-0 flex-x-center flex-y-center">已完成</div>
      </div>
      <div class="WeChat-login flex-row flex-y-center">
        <div class="icon-imges">
          <img v-src="'/static/image/fenxiang.png'" alt="">
        </div>
        <div class="Login_applet">
          微信分享
        </div>
        <div>0 / 1</div>
        <div class="off_the_stocks flex-grow-0 flex-x-center flex-y-center">已邀请</div>
      </div>
      <div class="WeChat-login flex-row flex-y-center">
        <div class="icon-imges">
          <img v-src="'/static/image/yaoqing.png'" alt="">
        </div>
        <div class="Login_applet">
          邀请好友
        </div>
        <div>0 / 1</div>
        <div class="off_the_stocks flex-grow-0 flex-x-center flex-y-center">已分享</div>
      </div>
      <div class="other_methods">其他方式</div>
      <div class="Official_Accounts">
        <span>微信公众号<span class="Every_word">"字字千金"</span></span>
        <a href="#" class="examine">查看更多获取文字方式</a>
      </div>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>
    <!--弹框结束-->
    <div class="search-box">
      <form class="search" action="." @submit.prevent="subMit">
        <p class="icon-font"></p>
        <p class="import">
          <input v-model="inputVal" type="text" placeholder="搜索字库">
        </p>
      </form>
      <div class="pull-down">
        <select v-model="selected" @change="changeType">
          <option value="1">默认排序</option>
          <option value="2">品质排序</option>
          <option value="3">拼音排序</option>
        </select>
        <div class="arrow_down"></div>
      </div>
    </div>
    <div class="word-stock">
      <div class="typeface clearfix">
        <div @click="wordsClick(item.font_id,item.word,item.quality,item.number)" v-for="(item,index) in userWords"
             :class="[{zise:item.quality==4},{blue:item.quality==3},{green:item.quality==2},{white:item.quality==1}]"
             class="font-box flex-grow-0 flex-y-center flex-x-center">
          {{item.word}}
          <span class="number-show">{{item.number}}</span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="fixed">
      <p class="transaction award">
        <a href="javascript:void (0)" @click="touser">每周奖励</a>
      </p>
      <p class="transaction gain">
        <a @click="getWordsClick" href="javascript:void (0)">获取文字</a>
      </p>
      <p class="transaction Trade-line">
        <a @click="toTradeLine" href="javascript:void (0)">交易行</a>
      </p>
    </div>
  </div>
</template>
<script>
  import {CheckIcon} from 'vux'
  import {GETUSERINFO, GETMYWORDS, GETWORDSINFO, USERBINDPHONENUMBER, USER_SALE} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'

  export default {
    components: {CheckIcon},
    comments: {CheckIcon},
    data() {
      return {
        showUserSetting: false,
        showRecharge: false,
        showTiXian: false,
        showBindPhone: false,
        showWordDetails: false,
        showSell: false,
        showMask: false,
        moneyItem: [10, 20, 50, 100, 500, 1000],
        rechargeIndex: 0,
        inputVal: '',
        selected: 1,
        deposit: 158.58,
        check_pay: true,
        userInfo: {},
        userWords: [],
        phoneData: {
          phoneNumber: '',
          code: ''
        },
        wordDetails: {},
        trandeLineWordDetials: {},
        user_number: 1,
        saleCount: 1,
        salePrice: '',
        timeList: [12, 24, 48],
        currentTimeIndex: 0,
        word_id: '',
        jin_e: ''
      }
    },
    watch: {
      inputVal(val) {
        if (!val) {
          this.getUserWords()
        }
      }
    },
    mounted() {
      this.getUserInfo();
      this.getUserWords();
    },
    methods: {
      // 全部提现
      // take_fetch() {
      //
      // },

      //search
      subMit() {
        if (this.inputVal) {
          this.getUserWords()
        } else {
          this.$vux.toast.text('请输入要搜索的文字')
        }
      },
      //select
      changeType() {
        // console.log(this.selected);
        this.getUserWords();
      },
      getUserInfo() {
        this.$ajax.get(GETUSERINFO, {}).then(res => {
          this.userInfo = res.data;
        })
      },
      getUserWords() {
        this.$ajax.get(GETMYWORDS, {
          word: this.inputVal,
          type: this.selected,
        }).then(res => {

          console.log(res.data);
          this.userWords = res.data;
        });
      },
      wordsClick(id, word, color, number) {
        this.word_id = id;
        this.$ajax.get(GETWORDSINFO, {
          word_id: id
        }).then(res => {
          console.log(res.data);
          console.log(number);
          this.wordDetails = res.data;
          this.wordDetails.word = word;
          this.wordDetails.color = color;
          this.user_number = number;
          this.salePrice = res.data.standard_price
          this.showWordDetails = true
        });
      },
      //user 绑定手机号
      bindPhoneBtn() {
        console.log(this.phoneData);
        if (this.phoneData.phoneNumber && this.phoneData.code) {
          if (/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(this.phoneData.phoneNumber)) {
            this.$ajax.post(USERBINDPHONENUMBER, {
              phone: this.phoneData.phoneNumber
            }).then(res => {
              console.log(res);
            });
          } else {
            this.$vux.toast.text('请输入正确的手机号')
          }

        } else {
          this.$vux.toast.text('不能为空')
        }
      },
      userCenterClick() {
        this.showUserSetting = true
      },
      userSettingListClick(index) {
        if (index == 1) {
          this.showBindPhone = true
        }
        this.showUserSetting = false;

      },
      rechargeClick() {
        this.showRecharge = true;
      },
      chooseMoney(index) {
        this.rechargeIndex = index;
      },
      cancleClick() {
        this.showRecharge = false;
        this.showTiXian = false;
        this.showBindPhone = false;
        this.showWordDetails = false;
        this.showSell = false;
        this.showMask = false;
      },
      timeChoose(index) {
        this.currentTimeIndex = index;
      },
      saleBtn() {
        this.showSell = true;
        this.showWordDetails = false;
      },
      user_sale() {
        this.$ajax.post(USER_SALE, {
          font_id: this.word_id,
          number: this.saleCount,
          money: parseFloat(this.salePrice).toFixed(2),
          duration: this.timeList[this.currentTimeIndex]
        }).then(res => {
          if (res.code == 1) {
            this.showSell = false;
            this.$vux.alert.show({
              content: '恭喜您出售成功',
              onHide() {
                let beforeUrl = document.URL.replace(/index/g, "tradeLine").split('?')[0];
                //window.location.href = location.origin + '/houseDetails.html?id=' + id;
                window.location.href = beforeUrl
              }
            });
          } else if (res.code == 0) {
            this.$vux.toast.text(res.msg)
          }
        });
      },

      tixianclick() {
        this.showTiXian = true;
      },
      sale_click_jian() {
        if (this.saleCount > 1) {
          this.saleCount--;
        } else {
          return false;
        }
      },
      sale_click_jia() {
        if (this.saleCount < this.user_number) {
          this.saleCount++;
        } else {
          return false;
        }
      },
      sale_click_zui_xiao() {
        this.saleCount = 1;
      },
      sale_click_zui_da() {
        this.saleCount = this.user_number;
      },
      salePrice_jian() {
        this.salePrice = this.salePrice * 0.95
      },
      salePrice_jia() {
        if (this.salePrice < this.wordDetails.standard_price * 1.25) {
          this.salePrice = this.salePrice * (1 + 0.05)
        }

      },
      salePrice_zui_xiao() {
        this.salePrice = this.wordDetails.standard_price * 0.75;
      },
      salePrice_zui_da() {
        this.salePrice = this.wordDetails.standard_price * 1.25;
      },

      getWordsClick() {
        this.showMask = true;
      },
      //  跳转
      toTradeLine() {
        let beforeUrl = document.URL.replace(/user/g, "tradeLine").split('?')[0];
        window.location.href = beforeUrl
      },
      touser() {
        let toUser = document.URL.replace(/user/g, "index").split('?')[0];
        let afterurl = `${toUser}?token=${window.localStorage.getItem('ZM_token')}`;
        window.location.href = afterurl
      }
    }
  }
</script>
<style>
  body {
    background: #fff;
  }
</style>
<style>
  @import "../style/user.css";
</style>


